<template>
  <div class="role-manag-page" style="position: relative; width: 100%; height: 100%">
    <div style="display: flex; height: 100%">
      <div style="width: 250px; background-color: white; border-right: 1px solid #dadada">
        <tree ref="mytree" @tree-node-selected="table.treeNodeSelected"></tree>
      </div>
      <div style="width: calc(100% - 250px)">
        <pageManage>
          <template #head>
            <div>
              <span class="search-item">所属应用:</span>
              <cascader
                ref="mycascader"
                class="search-item"
                style="width: 120px"
                :is-detail="false"
                :app-type-list="searchFun.appTypeListTra"
                @change="searchFun.appTypeValeChange"
              ></cascader>
            </div>
            <div>
              <span class="search-item">标识:</span>
              <a-input v-model:value="searchFun.searchInfo.key" class="search-item" style="width: 120px"></a-input>
            </div>
            <div>
              <span class="search-item">名称:</span>
              <a-input v-model:value="searchFun.searchInfo.name" class="search-item" style="width: 120px"></a-input>
            </div>
            <a-button type="primary" @click="searchFun.searchClick">
              <SearchOutlined />
              查询
            </a-button>
            <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
          </template>
          <template #middle>
            <div
              v-if="table.parItm.key !== '-2'"
              style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px"
            >
              <a-button type="primary" @click="cli_newAdd">
                <PlusOutlined />
                新增
              </a-button>
            </div>
            <div>
              <a-table
                :columns="table.columns"
                :data-source="portComList"
                :pagination="false"
                :loading="table.loading"
                :scroll="{ y: table.tableHeight }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'option'">
                    <div style="display: flex; align-items: center; font-size: 14px">
                      <a-button type="link" @click="cli_detail(record)">详情</a-button>
                      <!-- <a-button style="width: 40px" type="link" @click="cli_edit(record)">编辑</a-button>-->
                      <!-- <a-button style="width: 40px" type="link" @click="cli_delete(record)">删除</a-button>-->
                      <!-- <a-button style="width: 40px" type="link" @click="cli_detail(record)">详情</a-button>-->
                      <linkButton
                        :record="record"
                        :paritm="table.parItm"
                        @cli_edit="cli_edit"
                        @cli_add="cli_add"
                        @cli_person="cli_person"
                        @cli_pms="cli_pms"
                        @cli_delete="cli_delete"
                      ></linkButton>
                    </div>
                  </template>
                  <template v-if="column.key === 'override'">
                    {{ record.override ? '是' : '否' }}
                  </template>
                </template>
              </a-table>
            </div>
          </template>
          <template #foot>
            <a-pagination
              v-model:current="pagFun.pagInfo.pageNo"
              show-quick-jumper
              :total="pagFun.pagInfo.total"
              :responsive="false"
              @change="pagFun.onChange"
            />
          </template>
        </pageManage>
      </div>
    </div>
    <!-- 新增 编辑 右侧抽屉  -->
    <com_edit
      v-if="renewEdit"
      :upper-rol="upperRol"
      :app-type-list-tra="searchFun.appTypeListTra"
      :is-show-edit="isShowEdit"
      :is-edit="isEdit"
      :is-detl="isDetl"
      :type-list="searchFun.type"
      :current-item-id="currentItemId"
      @close-edit="closeEdit"
      @create-success="createSuccess"
      @update-success="updateSuccess"
    ></com_edit>
    <!--删除弹框    -->
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
      {{ `确认删除 ${deleteFun.del_idx.name} 吗 ?` }}
    </a-modal>
  </div>
  <!--详情    -->
  <detail v-if="isEdit === 'show'" @close-edit="closeEdit" @update-success="updateSuccess"></detail>
</template>

<script setup>
import { provide, ref, reactive, onMounted, nextTick, computed, toRefs, defineEmits } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import com_edit from './components/edit'
import cascader from './components/cascader'
import pageManage from '@/components/pageManageV2'
import tree from './components/tree'
import { message } from 'ant-design-vue'
import linkButton from './components/linkButton'
import detail from './components/detail'

const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTableData()
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 140,
    },
    {
      title: '标识',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '优先级',
      dataIndex: 'weight',
      key: 'weight',
    },
    {
      title: '是否可修改',
      dataIndex: 'override',
      key: 'override',
    },
    {
      title: '所属应用',
      dataIndex: 'scopeName',
      key: 'scopeName',
    },
  ],
  loading: 'false',
  tableHeight: 332,
  getTableData: (pag = { ...pagFun.pagInfo, parentId: table.parItm.key }) => {
    table.loading = true
    factory.getTableData(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  treeNodeSelected(node) {
    if (node.key === '-2' && table.parItm.key !== '-2') {
      table.tableHeight += 32
    } else if (node.key !== '-2' && table.parItm.key === '-2') {
      table.tableHeight -= 32
    }

    table.parItm = node
    table.getTableData()
  },
  parItm: { key: '-1', name: '托管角色' },
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('role-manag-page')
  table.tableHeight = ele[0].offsetHeight - 217
})
// ==大按钮新增====cli_newAdd
const cli_newAdd = () => {
  upperRol.value = table.parItm
  isEdit.value = 'new'
  isShowEdit.value = true
}
//==表格中按钮,编辑,详情,===============
const isShowEdit = ref(false)
const isEdit = ref(0)
const editActiveKey = ref('1')
const isDetl = ref(false)
const upperRol = ref({}) //上级
const renewEdit = ref(true) //重置抽屉数据使用
const currentItemId = ref({})
const cli_add = (obj) => {
  upperRol.value = obj
  isEdit.value = 'new'
  isShowEdit.value = true
}
const cli_edit = (obj) => {
  upperRol.value = table.parItm
  currentItemId.value = obj
  isEdit.value = 'edit'
  isShowEdit.value = true
}
const cli_detail = (obj) => {
  upperRol.value = table.parItm
  currentItemId.value = obj
  isEdit.value = 'show'
  editActiveKey.value = '1'
}
//==关联人员,关联权限=====================
const cli_person = (record) => {
  upperRol.value = table.parItm
  currentItemId.value = record
  isEdit.value = 'show'
  editActiveKey.value = '2'
}
const cli_pms = (record) => {
  upperRol.value = table.parItm
  currentItemId.value = record
  isEdit.value = 'show'
  editActiveKey.value = '3'
}

const closeEdit = () => {
  isShowEdit.value = false
  renewEdit.value = false
  nextTick(() => {
    renewEdit.value = true
  })
  isEdit.value = ''
}
const mytree = ref(null)
const updateSuccess = () => {
  mytree.value.reNewNode(table.parItm)
  table.getTableData()
}
const createSuccess = () => {
  mytree.value.reNewNode(table.parItm)
  table.getTableData()
}

//==删除============================
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (item) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = item
}
const delete_ok = () => {
  factory.delete({ key: deleteFun.del_idx.key }).then((res) => {
    deleteFun.isDelete = false
    table.getTableData()
  })
}

/***查询功能************************/
const mycascader = ref(null) //重置多级选择
const searchFun = reactive({
  searchInfo: { app: '', key: '', name: '' },
  searchClick: () => {
    pagFun.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, parentId: table.parItm.key }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { app: '', key: '', name: '' }
    mycascader.value.changeValue()
  },
  //所属应用
  appTypeList: [],
  appTypeListTra: computed(() => {
    let arr = searchFun.appTypeList
    arr.forEach((item) => {
      item.label = item.domain
      item.value = item.domain
      item.children = item.list
      item.children.forEach((m) => {
        m.label = m.name
        m.value = m.appKey
      })
    })
    return arr
  }),
  appTypeValeChange: (val) => {
    searchFun.searchInfo.app = val.value
  },
  getAppTypeList: () => {
    factory.getAppTypeList().then((res) => {
      searchFun.appTypeList = res.data
    })
  },
})
searchFun.getAppTypeList()

//子组件依赖注入
provide('roleParams', {
  upperRol,
  currentItemId,
  searchFun,
  editActiveKey,
})
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}
</style>
